<template>
  <div class="login">
    <div class="box">
      <div class="w50 logo">
        <img width="256" src="@/assets/暂无计划.png"/>
      </div>
      <div class="w50">
        <h1>登录</h1>
        <el-form class="form" :model="formData" :rules="rules" ref="loginForm">
          <el-form-item prop="username">
            <el-input placeholder="请输入用户名/手机号/邮箱" v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" type="password" v-model="formData.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" round @click="submit()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <!-- 
    表单
    登录注册  收货地址   
    表单是前端传递信息给后端的一种方式

    表单一般包含
    应填写控件，表单的验证
   -->
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      formData: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      code: 200 /**code 200 登录成功    400 登录失败 */
    }
  },
  methods: {
    submit () {
      this.$refs.loginForm.validate((result)=>{
        if (result == true) {
          // 验证通过
          // 像后端提交登录请求
          // 收到后端的反馈
          // 反馈给用户
          // alert('验证通过')


          axios.post('/api/login', this.formData).then(({data}) => {
            // console.log(data)  // 后端给的响应
              if(data.code == 400){
                this.$message.error(data.msg);
              }
              if (data.code == 200) {
                this.$message({
                  message: '登录成功',
                  type: 'success',
                  duration: 1000,
                  onClose: ()=>{
                    // 之前是用标签跳转   现在无法使用标签
                    // 界面路由确定   /home
                    this.$router.push('/home')
                  }
                })
                
              }
          })




          
        }
      })
    }
  }
}
</script>

<style scoped>
.form{
  padding: 30px;
}

/* 深度选择器 */
.form >>> .el-input__inner{
  border-radius: 30px;
}
.form >>> .el-button{
  width: 100%;
}
h1{
  text-align: center;
  font-size: 20px;
  margin-top: 40px;
  letter-spacing: 2px;
}
.logo{
  background: rgba(232,181,177,0.5);
  text-align: center;
  padding-top: 30px;
}
.w50{
  width: 50%;
}
/* css 单位  px  vh(屏幕高度的百分之一)  */
.login{
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(125deg, #6EAADB, #77E5C8, #41B4FE, #6CD8C1, #CEBEAB, #F79949, #EFCC58);
  background-size: 400%;
  animation: move 20s infinite;
  display: flex;
  justify-content: center;
  align-items: center;  /***纵轴居中 */
}
.box{
  display: flex;
  width: 700px;
  height: 360px;
  background: rgba(255,255,255,0.3);
  border-radius: 40px;
  overflow: hidden;
  /* padding: 40px; */
  border: 1px solid rgba(255,255,255,0.5);
}

@keyframes move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
</style>